<template>
  <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.index">
    <template #title>
      <el-icon v-if="item.icon">
        <component :is="item.icon"></component>
      </el-icon>
      <span><c-i18n>{{ item.title }}</c-i18n></span>
    </template>
    <c-menu-item v-for="(item2, index2) in item.children" :key="index2" :item="item2"></c-menu-item>
  </el-sub-menu>

  <el-menu-item v-else :index="item.index">
    <el-icon v-if="item.icon">
      <component :is="item.icon"></component>
    </el-icon>
    <template #title><c-i18n>{{ item.title }}</c-i18n></template>
  </el-menu-item>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import { type MenuItem } from './c-menu-interface'

defineProps({
  item: {
    type: Object as PropType<MenuItem>,
    required: true
  }
})
</script>

<style lang="scss" scoped></style>
